<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 11382
  Date: 2022/5/23
  Time: 19:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
  <style>
    .col-4{
      height: 600px;
    }
    .b3{
      background-color: #188fa2;
    }
    .searchType>ul>li{
      border: 0;
    }
    .searchType>ul{
      margin-left: 100px;
    }
  </style>
</head>
<body>
<%--导入依赖--%>
<%--页面二级标题--%>
<jsp:include page="/WEB-INF/pages/module/head.jsp">
  <jsp:param name="title_2" value="搜索结果页"/>
</jsp:include>
<%--导入导航栏--%>
<jsp:include page="/WEB-INF/pages/module/navbar.jsp">
  <jsp:param name="permission" value="1"/>
</jsp:include>
<div class="container">
  <div class="row">
    <div class="searchBar">
      <form class="d-flex" >
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" name="wd" id="wd" <c:if test="${!empty searchText}">value="${searchText}"</c:if>>
        <button class="btn btn-primary" type="button" style="width: 100px" id="searchOnce">挖掘一下</button>
      </form>
    </div>
    <div class="col-2 b1 searchType">
      <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bell" viewBox="0 0 16 16">
          <path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zM8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6z"></path>
        </svg>
        查询类型
      </a>
      <div id="list-example" class="list-group">
        <a class="list-group-item list-group-item-action" href="#" id="stype-article"
           <c:if test="${searchType eq 'article'}">style="background-color: rgba(49,125,255,0.51);" nowSearch="yes"</c:if>>
          帖子<c:if test="${searchType eq 'article'}">(当前)</c:if>
        </a>
        <a class="list-group-item list-group-item-action" href="#" id="stype-user"
           <c:if test="${searchType eq 'user'}">style="background-color: rgba(49,125,255,0.51);" nowSearch="yes"</c:if>>
          用户<c:if test="${searchType eq 'user'}">(当前)</c:if>
        </a>
      </div>
    </div>
    <div class="col-8 b2">
      <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bell" viewBox="0 0 16 16">
          <path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zM8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6z"></path>
        </svg>
        查询结果
      </a>
      <c:if test="${!empty searchResultArticles}">
        <c:forEach items="${searchResultArticles}" var="la">
          <a href="/article/${la.content}" class="list-group-item list-group-item-action">
            [
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-easel" viewBox="0 0 16 16">
              <path d="M8 0a.5.5 0 0 1 .473.337L9.046 2H14a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1h-1.85l1.323 3.837a.5.5 0 1 1-.946.326L11.092 11H8.5v3a.5.5 0 0 1-1 0v-3H4.908l-1.435 4.163a.5.5 0 1 1-.946-.326L3.85 11H2a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h4.954L7.527.337A.5.5 0 0 1 8 0zM2 3v7h12V3H2z"></path>
            </svg>
              ${la.type}
            ]&nbsp;&nbsp;&nbsp;
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chat-square-dots" viewBox="0 0 16 16">
              <path d="M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-2.5a2 2 0 0 0-1.6.8L8 14.333 6.1 11.8a2 2 0 0 0-1.6-.8H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2.5a1 1 0 0 1 .8.4l1.9 2.533a1 1 0 0 0 1.6 0l1.9-2.533a1 1 0 0 1 .8-.4H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"></path>
              <path d="M5 6a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"></path>
            </svg>
              ${la.title}&nbsp;&nbsp;&nbsp;
            @${la.creator}
            <div class="time" style="float: right">
                ${la.createTime}
            </div>
          </a>
        </c:forEach>
      </c:if>
      <c:if test="${!empty searchResultUsers}">
        <c:forEach items="${searchResultUsers}" var="ru">
          <a href="/user/${ru.username}" class="list-group-item list-group-item-action">
            <c:if test="${empty ru.header_url}">
              <img width="50x" height=50px src="/userHeader/default.jpg" class="rounded-circle">
            </c:if>
            <c:if test="${!empty ru.header_url}">
              <img width="50x" height=50px src="/userHeader/${ru.header_url}" class="rounded-circle">
            </c:if>
            ${ru.alias}@${ru.username}
            <div style="float: right;padding-top: 10px">[${ru.usergroup}]</div>
          </a>
        </c:forEach>
      </c:if>
      <c:if test="${empty searchResultArticles&&empty searchResultUsers}">
        <p class="list-group-item list-group-item-action" aria-current="true" style="text-align: center">
          对不起，没有找到你需要的信息哦~
        </p>
      </c:if>
    </div>
    <div class="col-2 b3">内容3</div>
  </div>
</div>
<script>
  $(function (){
    $("#stype-user").click(function (){
      window.location.href = "${pageContext.request.contextPath}/su?wd="+$("#wd").val();
    });
    $("#stype-article").click(function (){
      window.location.href = "${pageContext.request.contextPath}/sa?wd="+$("#wd").val();
    });
    $("#searchOnce").click(function (){
      let nowS;
      if($("#stype-article").attr("nowSearch")==="yes"){
        nowS = "sa";
      }
      if($("#stype-user").attr("nowSearch")==="yes"){
        nowS = "su";
      }
      window.location.href = "${pageContext.request.contextPath}/"+nowS+"?wd="+$("#wd").val();
    });
    $("#wd").focus(function (){
      if($("#wd").val()==="快来搜点东西吧~"){
        $("#wd").val("")
      }
    });

  });
</script>
</body>
</html>

